<template>
  <div class="w-upload">
    <el-upload
      v-if="showUpload"
      v-bind="$attrs"
      v-on="$listeners"
      :file-list="fileList"
      :auto-upload="false"
      action=""
      :accept="accept"
      :show-file-list="!showCustomList"
      :on-change="onChange"
      :on-remove="onChange"
    >
      <slot>
        <el-button size="small" type="primary">点击上传</el-button>
      </slot>
      <div slot="tip" class="upload-tip">
        <slot name="tip">
          <span v-if="accept">只能上传{{ accept }}格式的文件</span>
          <span v-if="accept && limitSize">，</span>
          <span v-if="limitSize">单个文件最大为{{ limitSizeStr }}</span>
          <span v-if="limitSize && limitCount">，</span>
          <span v-if="limitCount">最多可上传{{ limitCount }}个文件</span>
        </slot>
      </div>
    </el-upload>

    <div v-if="showCustomList" class="custom-list">
      <div v-for="item in fileList" :key="item.uid" class="custom-item">
        <span class="file-name" :title="item.name">{{ item.name }}</span>
        <span class="file-operation">
          <i class="el-icon-download" title="下载" @click="handleDownload(item)" />
          <i class="el-icon-delete" title="删除" @click="handleDelete(item)" />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadFile } from '@/utils/wUtils/file'

export default {
  name: 'WUpload',
  props: {
    value: {
      type: [Array]
    },
    // 文件格式限制 .png,.jpg
    accept: {
      type: String
    },
    // 文件数量限制
    limitCount: {
      type: Number
    },
    // 文件大小限制 KB
    limitSize: {
      type: Number
    },
    // 是否展示自定义列表
    showCustomList: {
      type: Boolean,
      default: false
    },
    // 是否展示上传部分
    showUpload: {
      type: Boolean,
      default: true
    },
    layout: {}
  },
  computed: {
    fileList: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    acceptList() {
      if (this.accept) {
        return this.accept.split(',').map((n) => n.trim())
      }
      return ['.*']
    },
    limitSizeStr() {
      const KB = 1
      const MB = 1024
      const GB = 1024 * 1024
      const size = this.limitSize

      if (size >= GB) {
        return `${size / GB}GB`
      }
      if (size >= MB) {
        return `${size / MB}MB`
      }
      return `${size / KB}KB`
    }
  },
  methods: {
    // 校验类型
    onTypeValidate(file) {
      const name = file.name
      const suffixIndex = name.lastIndexOf('.')
      const suffix = name.slice(suffixIndex, name.length)
      console.log('onTypeValidate', suffix, this.acceptList)
      if (!this.acceptList.includes('.*') && !this.acceptList.includes(suffix)) {
        this.$message.warning(`只能上传${this.accept}格式的文件`)
        return false
      }
      return true
    },
    // 校验大小
    onSizeValidate(file) {
      console.log('onSizeValidate', file.size, this.limitSize * 1024)
      if (file.size > this.limitSize * 1024) {
        this.$message.warning(`单个文件最大为${this.limitSizeStr}`)
        return false
      }
      return true
    },
    // 校验数量
    onCountValidate(fileList) {
      console.log('onCountValidate', fileList.length, this.limitCount)
      if (fileList.length > this.limitCount) {
        this.$message.warning(`最多可上传${this.limitCount}个文件`)
        return false
      }
      return true
    },
    onValidate(file, fileList) {
      const isValid = this.onTypeValidate(file) && this.onSizeValidate(file) && this.onCountValidate(fileList)
      if (!isValid) {
        return fileList.filter((n) => n.uid !== file.uid)
      }
      return fileList
    },
    onChange(file, fileList) {
      const _fileList = this.onValidate(file, fileList)
      this.$emit('input', _fileList)
    },
    handleDownload(file) {
      downloadFile(file.name, file.raw)
    },
    handleDelete(file) {
      const _fileList = this.fileList.filter((n) => n.uid !== file.uid)
      this.$emit('input', _fileList)
    }
  }
}
</script>

<style scoped lang="scss">
.w-upload {
  .upload-tip {
    margin-top: 10px;
    font-size: 12px;
    color: #999;
  }

  .custom-list {
    .custom-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 8px;

      &:hover {
        background-color: #f5f5f5;
      }
      .file-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .file-operation {
        flex-shrink: 0;
        i {
          cursor: pointer;
        }
        i + i {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
